<!DOCTYPE html>
<script src="../js/jquery.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-liquidfill.min.js"></script>
<script src="../js/echarts-gl.min.js"></script>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow-x: hidden;
			}
			body{
				background: #0a163f url(../images/welcome_bg.png) 0 0 no-repeat;
				background-size: 100% 100%;
			}
			.wel-container{
				position: absolute;
				width: auto;
				height: auto;
				left: 0px;
				top: 0;
				right: 0;
				bottom: 0;
				padding: 5px;
				font-family: "microsoft yahei";
			}
			.wel-title-box{
				width: 100%;
				height: 50px;
				line-height: 50px;
				background: url(../images/welcome_top_bg.png) 0 0 no-repeat;
				background-size: 100% 100%;
				text-align: center;
				color: #FFFFFF;
				font-size: 20px;
				margin-top: 5px;
			}
			.wel-content{
				width: auto;
				margin-top: 5px;
				background: rgba(255,0,0,0);
				padding: 5px;
			}
			.wel-table{
				width: 100%;
				height: 100%;
				border: 0;
				outline: none;
			}
			.wel-td{
				width: 29%;
				height: 33.3%;
				border: solid 2.5px rgba(255,255,0,0);
				background: url(../images/wel_item_bg.png) 0 0 no-repeat;
				background-size: 100% 100%;
			}
			.wel-center{
				width: 42%;
				background: url(../images/wel_item_center_bg.png) 0 0 no-repeat;
				background-size: 100% 100%;
			}
			.wel-center.top{
				background: none;
			}
			.wel-td-content{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			.item-title{
				display: block;
				height: 12%;
				margin-left: 22px;
				color: #FFFFFF;
				font-size: 0.875rem;
				padding-top: 2px;
			}
			.item-content{
				width: 100%;
				height: 87.8%;
				background: rgba(0,0,0,0);
			}
			.wel-td-conter{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0);
			}
		</style>
	</head>
	<body>
		<div class="wel-container">
			<div class="wel-title-box">电力消费指数系统</div>
			<div class="wel-content">
				<table class="wel-table">
					<tr>
						<td class="wel-td">
							<div class="wel-td-content">
								<span class="item-title">电力消费指数趋势</span>
								<div class="item-content" id="echart01"></div>
							</div>
						</td>
						<td class="wel-td wel-center top" rowspan="2">
							<div class="wel-td-conter" id="echart02"></div>
						</td>
						<td class="wel-td">
							<div class="wel-td-content">
								<span class="item-title">电力消费指数与GDP关联</span>
								<div class="item-content" id="echart03"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="wel-td">
							<div class="wel-td-content">
								<span class="item-title">电力消费指数环比分析</span>
								<div class="item-content">
									<table style="border: none;outline: none;min-width: 80%;">
										<tr>
											<td style="padding: 0 0 0 32px;">
												<div style="font-size: 12px;color: #FFFFFF;">ECI</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">108.71</span>
												</div>
											</td>
											<td style="padding: 0 0 0 8px;">
												<div style="font-size: 12px;color: #FFFFFF;">环比</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">+2.04%</span>
												</div>
											</td>
										</tr>
										<tr>
											<td style="padding: 0 0 0 32px;">
												<div style="font-size: 12px;color: #FFFFFF;">用电量</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">1.12</span>
												</div>
											</td>
											<td style="padding: 0 0 0 8px;">
												<div style="font-size: 12px;color: #FFFFFF;">环比</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">+3.84%</span>
												</div>
											</td>
										</tr>
										<tr>
											<td style="padding: 0 0 0 32px;">
												<div style="font-size: 12px;color: #FFFFFF;">用户数</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">1.25</span>
												</div>
											</td>
											<td style="padding: 0 0 0 8px;">
												<div style="font-size: 12px;color: #FFFFFF;">环比</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">+0.33%</span>
												</div>
											</td>
										</tr>
										<tr>
											<td style="padding: 0 0 0 32px;">
												<div style="font-size: 12px;color: #FFFFFF;">平均电价</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">0.84</span>
												</div>
											</td>
											<td style="padding: 0 0 0 8px;">
												<div style="font-size: 12px;color: #FFFFFF;">环比</div>
												<div style="margin-top: 0.3125rem;">
													<span style="font-size: 16px;color: #ffd200;">-1.01%</span>
												</div>
											</td>
										</tr>
									</table>
								</div>
							</div>
						</td>
						<td class="wel-td">
							<div class="wel-td-content">
								<span class="item-title">省份排名&nbsp<span style="font-weight:1000;font-size: 10px;color: #ffd200;">TOP10</span></span>
								<div class="item-content" id="echart05"></div>
							</div>
						</td>
					</tr>
					<tr>
						<td class="wel-td">
							<div class="wel-td-content">
								<span class="item-title">用电量趋势与预测</span>
								<div class="item-content" id="echart06"></div>
							</div>
						</td>
						<td class="wel-td wel-center">
							<div class="wel-td-content">
								<span class="item-title">不同用户类型用电占比</span>
								<div class="item-content" id="echart07"></div>
							</div>
						</td>
						<td class="wel-td">
							<div class="wel-td-content">
								<span class="item-title">用电时段分布</span>
								<div class="item-content" id="echart08"></div>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function initView(){
		var cH = $(".wel-container").height();
		var cW = $(".wel-container").width();
		var titleH = $(".wel-title-box").height()+5;
		$(".wel-content").css({width:(cW-10)+"px",height:(cH-titleH-15)+"px"});
	}
	initView();
	window.onresize=function(){
		location.reload();
	}
</script>
<script src="../js/welcome.js"></script>
